<template>
  <div id="goods-type-search">
    <h3 class="title"> 关联产品 <span style="color: #FF7E00;font-weight: 500;" v-if="max > 0">(只能关联{{max}}个商品)</span></h3>
    <!-- 商品或者链接tab切换按钮 -->
    <div class="goods-link" v-show="showLink">
      <button type="button" class="btns" :class="{active: params.type == 'goods'}" @click="selectGoodsOrLink('goods')">商品</button>
      <button type="button" class="btns" :class="{active: params.type == 'link'}" @click="selectGoodsOrLink('link')">链接</button>
    </div>
    <!-- 商品品类下拉选择（当前是商品） -->
    <div class="class-select" v-show="params.type == 'goods'">
      <div class="select" v-for="(goodsClass, index) in goodsClassList" v-bind:key="index" v-show="selectedIndex >= index">
        <w-select :options="goodsClass.list" v-model="goodsClass.gcId" @on-select="handlerGoodsClass(index + 1, goodsClass.gcId, false)"></w-select>
      </div>
      <div class="input">
        <w-input :validate="false" holder="商品名称 商品货号" v-model="goodsName"></w-input>
      </div>
      <div class="select" v-if="type == 1">
        <w-select @input="$emit('header', params.type)" :options="[{value: 1, label: '现货'}]" v-model="params.goodsType"></w-select>
      </div>
    </div>
    <!-- 商品品类下拉选择（当前是链接） -->
    <div class="class-select" v-show="params.type == 'link'">
      <w-input class="input-long" v-model="params.goodsLink" @input="$emit('on-input', params)" :validate="false" holder="商品链接"></w-input>
    </div>
    <w-button class="main search-btn" v-show="params.type == 'goods'" @on-click="onInput()">查询</w-button>
  </div>
</template>

<script>
// 获取请求消息体
import { apiGoods } from '../../../common/api.js'

export default {
  props: {
    max: {
      type: [Number, String],
      default: 0
    },
    type: {
      type: [Number, String],
      default: 0
    },
    tabType: {
      type: Number,
      default: 0
    },
    link: {
      type: [String, Number],
      default: 0
    },
    showLink: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 如果当年是链接
    if (this.tabType == 1) {
      this.params.type = 'link'

      // 如果是链接，则将之前填写的链接放上去
      this.params.goodsLink = this.link
    }
  },
  data() {
    return {
      selectedIndex: 0,
      goodsName: '',
      goodsClassList: [
        {
          gcId: '',
          list: []
        }
      ],
      wordType: 'goods',
      params: {
        type: 'goods',
        // 当前是期货还是现货
        goodsType: 1,
        gcId: '',
        goodsName: '',
        goodsLink: ''
      }
    }
  },
  created() {
    this.handlerGoodsClass()
  },
  methods: {
    /**
    *查询
     */
    onInput() {
      this.params.goodsName = this.goodsName
      this.$emit('on-input', this.params)
    },
    /**
     * 获取商品类目
     *
     * @params { Number }  level          第几级下拉按钮
     * @params { Number }  gcId           当前查询的id
     * @params { Boolean } isNotFirstLoad 是否是第一次加载
     */
    handlerGoodsClass(level = 0, gcId, isNotFirstLoad = true) {
      // 标记当前选中的第几个
      this.selectedIndex = level

      // 如果选择的是待选择选项（第一个下拉框）
      if (!isNotFirstLoad && !gcId) {
        this.params.gcId = ''
        this.selectedIndex = 0
        return
      }

      // 如果选择的是待选择选项（第一个下拉框）
      if (!isNotFirstLoad && this.goodsClassList[level - 1].list && this.goodsClassList[level - 1].list.length > 0 && this.goodsClassList[level - 1].list[0].value == gcId) {
        this.selectedIndex = level - 1
      }

      // 当前错误的索引
      let index = (level - 1) > 0 ? level - 1 : 0

      if (level != 0) {
        this.goodsName = ''
      }

      // 在本项目中只有3级，所以到达3级，直接不请求接口
      if (level >= 3) {
        this.params.gcId = gcId
        return
      }

      // 获取数据
      apiGoods.getGoodsClassInfo({ gcId }).then((data) => {
        // 如果没有获取到值，则将其赋值为空数组
        if (!data.goodsClassList || data.goodsClassList.length == 0) {
          // 设置选中的商品类目id
          this.params.gcId = gcId
          return
        }

        // 给第几级列表清空
        if (!this.goodsClassList[level]) {
          this.goodsClassList.push({
            gcId: '',
            list: []
          })
        }

        // 先清空数据
        this.goodsClassList[level].gcId = ''
        this.goodsClassList[level].list = [
          {
            value: (gcId || ''),
            label: '请选择'
          }
        ]

        // 将商品列表处理后放到数组中
        data.goodsClassList.forEach((v) => {
          this.goodsClassList[level].list.push({
            value: v.goodsClassId,
            label: v.className
          })
        })

        // 如果最后的值存在
        if (this.goodsClassList[index].gcId) {
          // 设置选中的商品类目id
          this.params.gcId = this.goodsClassList[index].gcId
        }
      })
    },

    /**
     * 选择商品或者链接，设置关键字类型
     *
     * @param { String } type 商品种类
     * link: 点击的是链接 goods: 点击的是商品
     */
    selectGoodsOrLink(type) {
      // 设置关键字类型
      this.params.type = type

      // 发送请求
      this.$emit('header', type)
    }
  },
  watch: {
    goodsName(curVal, oldVal) {
      if (curVal && curVal != '') {
        this.goodsClassList = [
          {
            gcId: '',
            list: []
          }
        ]
        this.params.gcId = ''
        this.handlerGoodsClass()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  background-color: #f2f2f2;
  font-size: 14px;
  height: 52px;
  line-height: 52px;
  margin-left: -30px;
  margin-right: -30px;
  padding-left: 20px;
}

.goods-link {
  border-bottom: 1px solid #e0e0e0;
  margin: 0px -10px;
  padding: 26px 100px;

  .btns {
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1px solid rgb(204, 204, 204);
    width: 90px;
    height: 30px;
    margin-right: 36px;

    &.active {
      background-color: rgb(71, 189, 244);
      border: 1px solid rgb(71, 189, 244);
      color: #FFFFFF;
    }
  }
}

.class-select {
  border-bottom: 1px solid #e0e0e0;
  padding: 26px 100px;
  margin: 0px -10px;

  .select {
    display: inline-block;
    width: 132px;
    margin-right: 26px;
    margin-bottom: 10px;
  }

  .input {
    display: inline-block;
    width: 160px;
  }

  .input-long {
    width: 300px;
  }
}

.search-btn {
  margin: 30px 0px 46px 90px;
}
</style>
